<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="isbn" label="图书名" width="180">
      </el-table-column>
      <el-table-column prop="name" label="图书编号" width="180">
      </el-table-column>
      <el-table-column prop="author" label="图书作者" width="180">
      </el-table-column>
      <el-table-column prop="price" label="图书价格" width="180">
      </el-table-column>
      <el-table-column prop="sum" label="图书总量"> </el-table-column>
      <el-table-column prop="remain" label="剩余数量"> </el-table-column>
      <el-table-column prop="location" label="图书位置"> </el-table-column>
      <el-table-column prop="publisher" label="出版社"> </el-table-column>
    </el-table>
    <el-input
      type="textarea"
      :rows="4"
      placeholder="请输入内容"
      v-model="textarea"
    >
    </el-input>
    <el-button type="primary" @click="addCommit">增加评论</el-button>
    <br /><br />
    <div style="text-align:left">来自网友的评论</div>
    <div class="comment_box">
      <div v-for="item in comment" :key="item.id">
        <span>{{ item.comment }}</span>
        <el-divider content-position="right"
          >{{ item.time }}&nbsp;&nbsp;&nbsp;&nbsp;{{ time.user }}</el-divider
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textarea: "",
      tableData: [
        {
          name: "潘嘎之交",
          isbn: "001",
          author: "嘎子",
          price: "￥99",
          sum: "9",
          remain: "0",
          location: "抖音",
          publisher: "字节跳动出版社"
        }
      ],
      comment: {},
      msg: "",
      msg1: "",
      token: "",
    };
  },
  //接受父组件的值
  props: ["bid"],
  mounted: function() {
    //获取书本信息
    console.log(this.bid)
    this.$axios({
      method: "get",
      url: "http://127.0.0.1:8000/id/",
      data: {
        //这里是发送给后台的数据
        id: this.bid
      }
    })
      .then(response => {
        var data = response.data;
        //   this.tableData = data;
      })
      .catch(error => {
        //如果token过期则重新获取token
      });
    //获取该书籍的评论信息
    this.$axios({
      method: "get",
      url: "http://127.0.0.1:8000/comment/",
      data: {
        //这里是发送给后台的数据
        id: this.bid
      }
    })
      .then(response => {
        var data = response.data;
        //   this.comment = comment;
      })
      .catch(error => {
        this.msg = msg;
        //如果token过期则重新获取token
      });
  },
  methods: {
    addCommit() {
      var textarea = this.textarea;
      var token = localStorage.getItem("localStorage");
      this.$axios({
        method: "post",
        url: "http://127.0.0.1:8000/comment/",
        data: {
          //这里是发送给后台的数据
          token: token,
          bid: bid,
          comment: textarea
        }
      })
        .then(response => {
          var data = response.data;
          if (data.msg == "评论成功") {
            alert("评论成功");
            //刷新页面
            this.$router.push({ name: "bookinfo", params: { bid: bid } });
          } else {
            alert("评论失败！");
          }
        })
        .catch(error => {
          this.msg = msg;
        });
    }
  }
};
</script>

<style>
.comment_box {
  border: 1px solid #dcdfe6;
  margin-top: 2%;
}
</style>
